<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8">
<title>Person Index</title>

<script th:inline="javascript">     
	var ctx = [[@{/}]];  

	
	
	function queryAllPerson(){
		fetch(`${ctx}person/`,{
			method:"GET",
			headers:{
				Accept:"application/json;charset=UTF-8"
			}
		}).then(function(res){
			console.log(res);
			return res.json();
		}).then(function(res){
			console.log(res);
			document.getElementById("result").value = JSON.stringify(res);
		});
		
	}
	
	
	function testTransaction(){
		eval("var person = " + document.getElementById("personInfoForSave").value);
		fetch(`${ctx}person/testTransaction`,{
			method:"POST",
			headers:{
				Accept:"application/json;charset=UTF-8",
				"Content-Type":"application/json;charset=UTF-8"
			},
			body:JSON.stringify(person)
		}).then(function(res){
			console.log(res);
			return res.json();
		}).then(function(res){
			console.log(res);
			document.getElementById("result").value = JSON.stringify(res);
		});
	}
	function savePerson(){
		eval("var person = " + document.getElementById("personInfoForSave").value);
		fetch(`${ctx}person/`,{
			method:"POST",
			headers:{
				Accept:"application/json;charset=UTF-8",
				"Content-Type":"application/json;charset=UTF-8"
			},
			body:JSON.stringify(person)
		}).then(function(res){
			console.log(res);
			return res.json();
		}).then(function(res){
			console.log(res);
			document.getElementById("result").value = JSON.stringify(res);
		});
	}
	
	
	function updatePerson(){
		eval("var person = " + document.getElementById("personInfoForUpdate").value);
		fetch(`${ctx}person/${person.id}`,{
			method:"PUT",
			headers:{
				Accept:"application/json;charset=UTF-8",
				"Content-Type":"application/json;charset=UTF-8"
			},
			body:JSON.stringify(person)
		}).then(function(res){
			console.log(res);
			return res.json();
		}).then(function(res){
			console.log(res);
			document.getElementById("result").value = JSON.stringify(res);
		});
	}
	
	function queryPersonById(){
		var pid = document.getElementById("pid").value;
		fetch(`${ctx}person/${pid}`,{
			method:"GET",
			headers:{
				Accept:"application/json;charset=UTF-8"
			}
		}).then(function(res){
			console.log(res);
			return res.json();
		}).then(function(res){
			console.log(res);
			document.getElementById("result").value = JSON.stringify(res);
		});
	}
	
	function queryPersonByName(){
		var pname = document.getElementById("pname").value;
		fetch(`${ctx}person/name/?name=${pname}`,{
			method:"GET",
			headers:{
				Accept:"application/json;charset=UTF-8"
			}
		}).then(function(res){
			console.log(res);
			return res.json();
		}).then(function(res){
			console.log(res);
			document.getElementById("result").value = JSON.stringify(res);
		});
	}
	
	function deletePersonById(){
		var pid = document.getElementById("pid").value;
		fetch(`${ctx}person/${pid}`,{
			method:"DELETE",
			headers:{
				Accept:"application/json;charset=UTF-8"
			}
		}).then(function(res){
			console.log(res);
			return res.json();
		}).then(function(res){
			console.log(res);
			document.getElementById("result").value = JSON.stringify(res);
		});
	}
</script>

</head>
<body> 

<textarea id="result" style="width:100%;height:150px"></textarea>
<input type="button" value="查询person列表" onclick="queryAllPerson()"/>

| 
输入ID<input type="text" id="pid" name="pid"/> 
<input type="button" value="根据ID查询" onclick="queryPersonById()"/> 
<input type="button" value="根据ID删除" onclick="deletePersonById()"/>
| 
输入Name<input type="text" id="pname" name="pname"/> 
<input type="button" value="根据Name查询" onclick="queryPersonByName()"/> 



<br/>
<table width="100%">
<tr>
	<td width="50%" align="right">
	<textarea id="personInfoForSave" style="width:100%;height:120px">
{
"name":"devil13th",
"age":5,
"address":"addr",
"birthday":null,
"createTime":null,
}
</textarea><br/>
<input type="button" value="测试事务" onclick="testTransaction()"/> <input type="button" value="保存" onclick="savePerson()"/><br/>
	</td>
	<td width="50%" align="right">

<textarea id="personInfoForUpdate" style="width:95%;height:120px">
{
"id":"4028947667307e270167308124160004",
"name":"devil13th",
"age":5,
"address":"addr",
"birthday":null,
"createTime":null,
"info":"devil13th : 5"}
</textarea><br/>
<input type="button" value="修改" onclick="updatePerson()"/><br/>	
	</td>
<tr/>
<table>


	

<br/>



 

</body>
</html>